<template>
	<view class="refund">
		<!-- 订单信息 -->
		<view class="order">
			<view class="item" v-for="(item,index) in orderDetail.items" :key="index">
				<image :src="item.images" mode="aspectFill"></image>
				<view class="text">
					<view class="hd">{{item.title}}</view>
					<view class="md">规格：{{item.spec_text}}　X{{item.buy_number}}</view>
					<view class="md">价格：￥{{item.price}}元　金额：￥{{item.total_price}}元</view>
					<view class="bd" @tap="navTo(item)">
						申请退单
					</view>
				</view>
			</view>
			<!-- 订单金额 总计 -->
			<view class="total">
				{{orderDetail.describe}}
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId:0,
				orderDetail:[],
			}
		},
		onLoad(params) {
			this.orderId=params.orderid;
		},
		onShow(){
			let self=this;
			
			// 根据订单id，查出订单详情
			let orderDetailUrl=this.requestUrl.orderDetail;
			let orderParam={
				data:{
					id:this.orderId,
				}
			}
			this.util.request(orderDetailUrl,'post',function(res){
				if(res.data.code==0 && res.data.data){
					self.orderDetail=res.data.data
				}
			},orderParam)
		},
		methods: {
			navTo(item){
				uni.navigateTo({
					url:`/pages/refund/apply?oid=${this.orderId}&gid=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.refund{background:$uni-bg-color-grey;padding:20rpx}
	.order{display: flex;flex-direction: column;}
	.order .item{background: #FFFFFF;padding:20rpx;border-radius:$uni-border-radius-base;display: flex;flex-direction: row;justify-content: space-between;margin-bottom: 15rpx;}
	.order .item image{width:200rpx;height: 200rpx;}
	.order .item .text{width:450rpx}
	.order .item .text .hd{font-size: $uni-font-size-base;color: $uni-text-color;}
	.order .item .text .md{font-size: $uni-font-size-sm;color: $uni-text-color-grey;margin-top: 10rpx;}
	.order .item .text .bd{width:150rpx;height: 50rpx;text-align: center;color: #FFFFFF;background: #DD524D;line-height: 50rpx;border-radius: $uni-border-radius-base;float: right;margin-top: 20rpx;}
	.total{padding:20rpx 30rpx;font-size: $uni-font-size-base;background: #FFFFFF;padding:20rpx;border-radius:$uni-border-radius-base;text-align: right;}

</style>
